<template>
<!--我的订单-->
  <div class="orders">
      <div class="titleWrap">
        <p class="titleName" >我的能力</p>
        <span class="pull-right font14"><span @click.stop.prevent="backAblity" style="cursor: pointer">我的能力</span> > 我的学历分</span>
      </div>
      <div class="showwrap">
        <div class="circleOut">
          <i-circle :percent="studyPer" :size="184" :trail-width="4" :stroke-width="5" trail-color="#eeeff3" stroke-color="#957960" dashboard>
            <span class="demo-circle-inner" style="font-size:40px">{{studyScore}}</span>
            <p class="mypoint">我的学历分</p>
          </i-circle>
          <span class="abilityTip font14" @click="goLeida">能力雷达</span>
        </div>
      </div>
      <!--<span v-if="education.id === undefined" style="margin:15px 0">暂无教育经历</span>-->
      <span >
        <ul class="inforList font14">
          <li class="clearfix">
            <p class="listLeft">教育经历</p>
            <p class="editorThis font14" @click="editEducation">编辑</p>
            <!--<p class="listRight rightSet" v-if="education.isEducation === 1"><img src="../../assets/renzheng.png" alt="" width="70" ></p><p class="listRight rightSet" v-else><img src="../../assets/norenzheng.png" alt="" width="70" ></p>-->
            <p class="listRight rightSet" v-if="education.isEducation === 1"><img src="../../assets/renzheng.png" alt="" width="70" ></p><p class="listRight rightSet" v-else><img src="../../assets/nopass.png" alt="" width="70" ></p>
          </li>
          <li class="clearfix">
            <p class="listLeft">学校名称</p>
            <p class="listRight rightSet">{{education.schoolName}}</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">就读时间</p>
            <p class="listRight">{{education.studyStartTime}}-{{education.studyEndTime}}</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">学历</p>
            <p class="listRight">{{education.education}}</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">专业</p>
            <p class="listRight">{{education.major}}</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">是否统招</p>
            <p class="listRight" v-if="education.unified == 1">是</p>
            <p class="listRight" v-else>否</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">证书编号</p>
            <p class="listRight">{{education.certificateNo}}</p>
          </li>
          <li class="clearfix">
            <img class="showimg" :src="education.diploma"/>
          </li>
          <li class="clearfix">
            <p class="listLeft">职称</p>
            <p class="listRight">{{education.academicTitle}}</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">级别</p>
            <p class="listRight">{{education.grade}}</p>
          </li>
          <li class="clearfix">
            <p class="listLeft">职称证书</p>
          </li>
          <li class="clearfix">
            <img class="showimg" :src="education.academicImg"/>
          </li>
        </ul>
      </span>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .editorThis {
    color: #957960;
    padding: 0 0 0 20px;
    height: 22px;
    /*font-size: 16px;*/
    position: absolute;
    right: 0px;
    top: 2px;
    line-height: 20px;
    background: url("../../assets/edit.png") no-repeat left center;
    background-size: 14px;
    cursor: pointer;
  }

  .titleWrap {
    height: 40px;
    font-size: 18px;
    padding-bottom: 20px;
    text-align: justify-all;
    border-bottom: 1px solid #E1E1E1;
    margin-bottom: 20px;
    color: #957960;
    .titleName {
      float: left;
      line-height: 24px;
      border-bottom: 3px solid #957960;
      padding-bottom: 13px;
      font-size: 14px;
    }
    .pull-right{
      /*font-size: 16px;*/
      color: #333;
    }
  }
  .showwrap {
    text-align: center;
    .circleOut {
      display: inline-block;
      width: 260px;
      height: 260px;
      padding-top: 38px;
      background: url("../../assets/cricleBack.png") no-repeat center center;
      background-size: 260px;
    }
    .abilityTip{
      display: inline-block;
      height: 42px;
      padding: 0 15px;
      border-radius: 21px;
      text-align: center;
      line-height: 42px;
      background-color: #957960;
      color: #fff;
      min-width: 130px;
      cursor: pointer;
      /*font-size: 16px;*/
    }

  }
  .suretips {
    display: inline-block;
    padding: 0 4px;
    height: 24px;
    /*background-color: #0a3c68;*/
    border-radius: 5px;
    color: #fff;
    text-align: center;
    img{
      vertical-align: middle;
      margin-right: 5px;
    }
  }
  .inforList {
    padding: 20px 0;
    li {
      margin-bottom: 15px;
      position: relative;
      .listLeft {
        /*font-size: 16px;*/
        color: #666;
        float: left;
      }
      .listRight {
        margin: 0 0 0 90px;
        padding: 0 20px 0 0;
        /*font-size: 16px;*/
        color: #333;
        line-height: 24px;
        .suretips {
          vertical-align: top;
          margin-left: 10px;
        }
      }
      .rightSet {
        margin-right: 70px;
        /*font-size: 16px;*/
        color: #333;
      }
    }
  }
  .inforList li .showimg {
    display: block;
    width: 275px;
    height: 200px;
    overflow: hidden;
    margin-left: 90px;
  }


</style>
<script type="text/ecmascript-6">
  import centers from '../template/center'
  import {myEducationPage,centreInfoWeb} from '../../http'
  import imgPathFilter from '../../myFilters'
  import {getStore} from '../../storage'
    export default {
        name: 'orderdetail',
        props: {},
        data() {
            return {
              education:'',
              studyScore:0,
              studyPer:0,
              isSpinShow:false,
            };
        },
        methods: {
          //是否允许修改教育经历
          editEducation(){
            if(JSON.stringify(this.education) !== '{}'){
              if(this.education.isEducation === 1){
                this.$Notice.warning({
                  title: "资料编辑提醒",
                  desc: "教育信息已认证，无法修改！",
                  duration: 3,
                });
                return;
              }
            }
            this.$router.push({
              name:'jiaoyu'
            })
          },
          //返回上级我的能力
          backAblity(){
            this.$router.push({
              name:'ablity'
            })
          },
          goLeida(){
            this.$router.push({
              name:'ablity_leida'
            })
          },
          getAblityXuefen(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //获取工作分页面信息
                  myEducationPage().then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      this.studyScore = res.data.studyScore;
                      this.studyPer = parseInt(res.data.studyScore) / parseInt(res.data.studyScoreAll) * 100;
                      this.education = res.data.education;
                    }else {
                      this.isSpinShow = false;
                    }
                  }).catch()
                }else {
                  this.isSpinShow = false;
                }
              }).catch()
            }
          }
        },
        created() {
          this.getAblityXuefen()
        },
        components: {
        }
    }
</script>
